<template>
  <el-dialog
    title="班级列表"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    width="70%"
  >
    <el-row class="JADP-common-search-box" :gutter="16">
      <el-form @submit.native.prevent>
        <el-col :span="6">
          <el-form-item label="班级名称">
            <el-input v-model="query.classname" placeholder="请输入" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6" v-show="parameterFlag">
          <el-form-item label="培训类别">
            <el-select
              v-model="query.train_type"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in getDict('pxlb')"
                :key="index"
                :label="item.dataName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6" v-show="parameterFlag">
          <el-form-item label="行业类型">
            <el-select
              v-model="query.categorytype"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in getDict('hangye')"
                :key="index"
                :label="item.dataName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh-right" @click="reset()"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <JADP-table
      v-if="!multiple"
      v-loading="loading"
      :data="list"
      @sort-change="sortChange"
      highlight-current-row
      @current-change="handleCurrentChange"
      :row-style="{ cursor: 'pointer' }"
      height="400"
    >
      <el-table-column
        prop="classname"
        label="班级名称"
        align="left"
        show-overflow-tooltip
      />
      <el-table-column
        prop="categorytype"
        label="行业类型"
        align="left"
        width="135"
      />
      <el-table-column label="培训类别" prop="train_type" algin="left">
        <template slot-scope="scope">
          {{ getDict("pxlb", scope.row.train_type) }}
        </template>
      </el-table-column>

      <el-table-column
        prop="signupdate_start"
        label="报名开始时间"
        align="left"
      />
      <el-table-column
        prop="signupdate_end"
        label="报名结束时间"
        align="left"
      />
      <el-table-column
        prop="traindate_start"
        label="培训开始时间"
        align="left"
        width="135"
      />
      <el-table-column
        prop="traindate_end"
        label="培训结束时间"
        align="left"
        width="135"
      />
      <el-table-column label="培训方式" prop="train_mode" algin="left">
        <template slot-scope="scope">
          {{ getDict("bjpxfs", scope.row.train_mode) }}
        </template>
      </el-table-column>

      <el-table-column prop="hours" label="学时" align="left" />
    </JADP-table>

    <JADP-table
      v-else
      v-loading="loading"
      :data="list"
      @sort-change="sortChange"
      highlight-current-row
      has-c
      @selection-change="handleSelectionChange"
      height="400"
    >
      <el-table-column
        prop="classname"
        label="班级名称"
        align="left"
        show-overflow-tooltip
      />
      <el-table-column
        prop="categorytype"
        label="行业类型"
        align="left"
        width="135"
      />
      <el-table-column label="培训类别" prop="train_type" algin="left">
        <template slot-scope="scope">
          {{ getDict("pxlb", scope.row.train_type) }}
        </template>
      </el-table-column>

      <el-table-column
        prop="signupdate_start"
        label="报名开始时间"
        align="left"
      />
      <el-table-column
        prop="signupdate_end"
        label="报名结束时间"
        align="left"
      />
      <el-table-column
        prop="traindate_start"
        label="培训开始时间"
        align="left"
        width="135"
      />
      <el-table-column
        prop="traindate_end"
        label="培训结束时间"
        align="left"
        width="135"
      />
      <el-table-column label="培训方式" prop="train_mode" algin="left">
        <template slot-scope="scope">
          {{ getDict("bjpxfs", scope.row.train_mode) }}
        </template>
      </el-table-column>

      <el-table-column prop="hours" label="学时" align="left" />
    </JADP-table>
    <pagination
      :total="total"
      :page.sync="listQuery.currentPage"
      :limit.sync="listQuery.pageSize"
      @pagination="initData"
    />

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "clazztable",
  props: {
    multiple: Boolean,
    default: false
  },
  data() {
    return {
      visible: false,
      loading: false,
      query: {
        classname: undefined,
        train_type: undefined,
        categorytype: undefined,
        isAdmin: true
      },
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      },
      list: [],
      multipleSelection: [],
      currentRow: null,
      parameterFlag: true
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.loading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        organizeId:this.$store.getters.organizeId
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: `/api/xy_ks_class_info/Xy_ks_class_info`,
        method: "get",
        data: query
      }).then(res => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.loading = false;
      });
    },

    parameterInit(categorytype, train_type) {
      this.visible = true;
      this.parameterFlag = false;
      this.query.train_type = train_type;
      this.query.categorytype = categorytype;
      this.initData();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentRow = val;
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      };
      this.initData();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      };
      this.initData();
    },
    dataFormSubmit() {
      // console.log(this.multiple,this.multipleSelection,this.currentRow, 'this.multipleSelection');
      // return
      if (this.multiple) {
        this.$emit("multipleSelection", this.multipleSelection);
        this.visible = false;
      } else {
        if (this.currentRow) {
          this.$emit("currentRow", this.currentRow);
          this.visible = false;
        } else {
          this.$message.warning("请至少选择一个班级");
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
<style scoped lang="scss"></style>
